<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-shadow</title>
    <style>
        /*做一个效果*/
      .box {
        width: 200px;
        height: 200px;
        background-color: orange;
        margin: 0 auto;
        margin-top: 100px;
        font-size: 20px;
        /*写两个值 水平阴影 垂直阴影 盒子额阴影*/
        /*box-shadow: 10px 10px;*/
        /*写三个值 水平阴影 垂直阴影 阴影颜色 */
        /*box-shadow: 10px 10px blue;*/
        /* 写三个值 水平阴影 垂直阴影 模糊距离*/
        /*box-shadow: 10px 10px 20px;*/
        /*写四个值 水平阴影 垂直阴影 模糊距离 外延值*/
        /*box-shadow: 10px 10px 20px 20px;*/
        /*水平阴影 垂直阴影 模糊距离  外延值 颜色 内延*/
        /*box-shadow: 10px 10px 20px 10px pink inset;*/
        position: relative;
        /*  做的一个效果要用到 后面会讲的 */
        transition: 0.4s linear all;
      }
      .box:hover {
          top: -1px;
          box-shadow: 0px 0px 10px black;
      }
    </style>
</head>
<body>
  <div class="box">你好啊</div>
</body>
</html>